<template>
  <el-dialog v-model="dialog.visible" title="充值" width="30%" @close="handleCloseDialog">
    <div class="form-container">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="150px"
        class="form mb-0"
      >
        <el-form-item label="金额" prop="amount">
          <el-input-number
            v-model="formData.amount"
            :min="1"
            :max="99999999"
            class="!w-[220px]"
            placeholder="请输入金额"
          />
        </el-form-item>
        <el-form-item label="支付方式" prop="type">
          <el-radio-group v-model="formData.type" class="!w-[220px]">
            <el-radio v-for="item in options" :key="item.value" :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import MultiImageUpload from "@/components/Upload/MultiImageUpload.vue";
import coinsAPI, { CoinsRechargeRecodeForm, PaymentOrderQuery } from "@/api/coins/coins-api";
import { PAY_METHOD_ENUM, TRANSACTION_TYPE_ENUM } from "@/enums/conins/ConinsEnum";
import { getLabelValueList } from "@/utils/enums";
// 定义 emit，用于通知外部关闭事件
const emit = defineEmits(["update:modelValue", "loadData"]);
const dialog = reactive({
  title: "",
  visible: false,
});
/*基础信息*/
const formRef = ref();
const currentRow = ref({});
const loading = ref(false);
const qrcodeRef = ref();
const options = getLabelValueList(PAY_METHOD_ENUM);

const defaultFormData: PaymentOrderQuery = {
  amount: "",
  subject: "",
  type: PAY_METHOD_ENUM.WECHAT.value,
};
const formData = ref({
  ...defaultFormData,
});
const formRules = reactive({
  amount: [
    { required: true, message: "请输入金额", trigger: "blur" },
    { type: "number", message: "金额必须为数字" },
    { type: "number", max: 999999999, message: "金额超出最大值" },
  ],
  type: [{ required: true, message: "请选择支付方式", trigger: "change" }],
  certificate: [{ required: true, message: "请上传付款凭证", trigger: "change" }],
  rechargeTime: [{ required: true, message: "请选择充值时间", trigger: "change" }],
});

async function handleSubmit() {
  const validate = await formRef.value.validate();
  if (!validate) return;
  try {
    loading.value = true;
    const { content } = await coinsAPI.getWebQrcode(formData.value);
    const dom = document.createElement("div");
    dom.innerHTML = content;
    document.body.appendChild(dom);
    const form = document.getElementsByName("punchout_form");
    form[0].setAttribute("target", "_blank");
    form[0].submit();
    document.body.removeChild(dom);
    ElMessage.success("正在支付...");
  } catch (error) {
    console.log("error", error);
  } finally {
    loading.value = false;
  }
}

// 关闭弹窗
function handleCloseDialog() {
  dialog.visible = false;
  emit("update:modelValue", false); // 关闭弹窗
}

function showModal(val) {
  dialog.visible = true;
  currentRow.value = val;
  Object.assign(formData.value, defaultFormData, {
    certificate: JSON.parse(val.certificate || "[]"),
  });
}

defineExpose({
  showModal,
});
</script>
<style style="scss" scoped>
.form-container {
  height: 500px;
  overflow: auto;
}
.form {
  ::v-deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
